<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Fixed Fade Out Menu</title>
      <link rel="stylesheet" href="http://thehelpwiki.googlecode.com/svn/trunk/css/[thehelpwiki.blogspot.com]-css-1.css"/>
<script type="text/javascript" src="http://thehelpwiki.googlecode.com/svn/trunk/js/%5Bthehelpwiki.blogspot.com%5D%20jquery-1.js"></script>
 <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                                        var scrollTop = $(window).scrollTop();
                                        if(scrollTop != 0)
                                                $('#nav').stop().animate({'opacity':'0.2'},400);
                                        else    
                                                $('#nav').stop().animate({'opacity':'1'},400);
                                });
                               
                                $('#nav').hover(
                                        function (e) {
                                                var scrollTop = $(window).scrollTop();
                                                if(scrollTop != 0){
                                                        $('#nav').stop().animate({'opacity':'1'},400);
                                                }
                                        },
                                        function (e) {
                                                var scrollTop = $(window).scrollTop();
                                                if(scrollTop != 0){
                                                        $('#nav').stop().animate({'opacity':'0.2'},400);
                                                }
                                        }
                                );
            });
        </script>
    </head>
    <style>
        body{
            margin:0px;
            padding:0px;          
            font-family:Arial;
           background:#3A3A3A url(http://4.bp.blogspot.com/-mty-EXEBSTM/T1YWPXcMJuI/AAAAAAAABKQ/se6zcGkC3EU/s1600/fixedmenu2.png) no-repeat top center;
        }
                a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:transparent url(http://1.bp.blogspot.com/-tro9QTpmiZA/T1YWuK-GXxI/AAAAAAAABKo/Ank4_Qkaxdg/s1600/codrops_back+2.png) no-repeat top left;
        }
        .scroll{
            width:133px;
            height:61px;
            position:fixed;
            bottom:15px;
            left:20px;
            background:transparent url(http://2.bp.blogspot.com/-nC3vokCvybs/T1YWZBmnF-I/AAAAAAAABKg/GKRlVFlBDDE/s1600/scroll+2.png) no-repeat top left;
        }
        .info{
            text-align:right;

        }
                .desc{
                        height:90px;
                        width:100%;
                        position:absolute;
                        top:1000px;
                        left:0px;
                        background:transparent                                                url(http://4.bp.blogspot.com/-NnmdHkBmpnc/T1YWUNkB0CI/AAAAAAAABKY/GuRroKFP2vg/s1600/hover2.png) no-repeat center center;
                }
                #top{
                        top:0px;
                        left:0px;
                        position:absolute;
                        width:100%;
                        height:10px;
                }
                #bottom{
                        top:1500px;
                        left:0px;
                        position:absolute;
                        width:100%;
                        height:90px;
                        background:transparent url(http://3.bp.blogspot.com/-sq13vVp5RBI/T1YWNnNFZCI/AAAAAAAABKI/rQWdeVgB6L0/s1600/end+2.png) no-repeat center center;
                }
#adpack-wrapper{
        top:45px !important;
}
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a class="top" href="#top"><span></span></a></li>
                <li><a class="bottom" href="#bottom"><span></span></a></li>
                <li><a>Link 1</a></li>

                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li><a>Link 6</a></li>
                <li class="search">

                                        <input type="text"/><input class="searchbutton" type="submit" value=""/>
                                </li>
            </ul>
        </div>        
                <div id="top"></div>
                <div class="desc"></div>
                <div id="bottom"></div>
                <div class="scroll"></div>
        <div class="info">

            <a class="back" href="http://thehelpwiki.blogspot.com/2015/03/how-to-make-menu-bar-fixed-on-top-when.html"></a>
        </div>

       
       
       

    </body>
</html>
